<!--  -->
<template>
  <!-- <el-card class="mapone"> -->
  <el-card class="ik-chart-card">
    <div slot="header" class="clearfix">
      <!-- <span>{{ title }}</span> -->
      <span class="ik-chart-card-title">{{ title }}</span>
      <p class="table_title_img" />
      <span class="logo" />
    </div>
    <div
      id="map1"
      ref="chartDom"
      class="ik-chart-card-chart"
      :style="'height: ' + height + ''"
      @click="changeSize"
    />
  </el-card>

</template>

<script>
import * as echarts from 'echarts'
import city from '@/components/ik/echarts/data/city.json'
export default {
  name: 'IkMapBaseChart',
  components: {},
  props: {
    data: {
      type: Array,
      default: function() {
        return [
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '114.250806', 'y': '22.723739', 'attr': '', 'num': '1' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '115.250806', 'y': '24.723739', 'attr': '', 'num': '1' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '116.250806', 'y': '26.723739', 'attr': '', 'num': '4' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '117.250806', 'y': '28.723739', 'attr': '', 'num': '4' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '118.250806', 'y': '27.723739', 'attr': '', 'num': '8' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '119.250806', 'y': '25.723739', 'attr': '', 'num': '8' },
          { 'code': 'code', 'title': '北京市朝阳区', 'x': '120.250806', 'y': '21.723739', 'attr': '', 'num': '16' }]
      }
    },
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    // code 唯一标识
    code: {
      type: String,
      default: ''
    },
    // 当前map名字
    map: {
      type: String,
      default: function() {
        return 'China'
      }
    },
    // 经度key
    longitudeField: {
      type: String,
      default: 'x'
    },
    // 纬度key
    latitudeField: {
      type: String,
      default: 'y'
    },
    // 名称 key
    nameField: {
      type: String,
      default: 'title'
    },
    // 点大小
    valueField: {
      type: String,
      default: 'num'
    },
    // 样式
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      allMap: {
        '北京市': 'Beijing', '天津市': 'Tianjin', '上海市': 'Shanghai', '重庆市': 'Chongqing',
        '香港特别行政区': 'Xianggang', '澳门特别行政区': 'Aomen', '台湾省': 'Taiwan',
        '内蒙古自治区': 'Neimenggu', '广西壮族自治区': 'Guangxi', '西藏自治区': 'Xizang', '宁夏回族自治区': 'Ningxia', '新疆维吾尔自治区': 'Xinjiang',
        '河北省': 'Hebei', '山西省': 'Shanxi', '辽宁省': 'Liaoning', '吉林省': 'Jilin', '黑龙江省': 'Heilongjiang', '江苏省': 'Jiangsu',
        '浙江省': 'Zhejiang', '安徽省': 'Anhui', '福建省': 'Fujian', '江西省': 'Jiangxi', '山东省': 'Shandong', '河南省': 'Henan', '湖北省': 'Hubei',
        '湖南省': 'Hunan', '广东省': 'Guangdong', '海南省': 'Hainan', '四川省': 'Sichuan', '贵州省': 'Guizhou', '云南省': 'Yunnan', '陕西省': 'Shan_xi',
        '甘肃省': 'Gansu', '青海省': 'Qinghai'
      },
      chartSeries: [],
      chartDom: null,
      chart: null
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  mounted() {
    this.init()
  },
  methods: {
    changeSize() {
      // 修改 echart 大小
      this.chart.resize()
    },
    init() {
      const $this = this
      const data = []
      for (const i in $this.data) {
        data.push({
          name: $this.data[i][$this.nameField],
          code: $this.data[i].code,
          value: [$this.data[i][$this.longitudeField], $this.data[i][$this.latitudeField], 15],
          itemStyle: {
            normal: {
              color: 'rgb(46, 204, 113)' //  标点颜色
            }
          },
          label: {
            normal: {
              show: true, // 显示省份标签
              position: 'right',
              textStyle: {
                color: '#0041D2' // 标签字体颜色
              },
              formatter: '{b}'
            }
          }
        })
      }
      this.getMapChart(data)
    },
    getMapChart(data) {
      const $this = this
      this.chart = echarts.init(document.getElementById('map1'))
      echarts.registerMap('China', city)
      var option = {
        geo: {
          map: $this.map,
          label: {
            normal: {
              show: false // 显示省份标签
            },
            // 对应的鼠标悬浮效果
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          roam: true, // 是否开启鼠标缩放和平移漫游
          itemStyle: { // 地图区域的多边形 图形样式
            // 是图形在默认状态下的样式
            normal: {
              borderWidth: 0.5, // 区域边框宽度
              borderColor: '#fff', // 区域边框颜色
              areaColor: '#3EABFF' // 区域颜色
            },
            // 是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
            emphasis: {
              borderWidth: 0.5,
              borderColor: '#fff',
              areaColor: '#0078FF',
              label: { show: true }
            }
          },
          aspectScale: 0.75,
          zoom: 1.2 // 地图缩放比例,默认为1
        },
        tooltip: { // 这里设置提示框
          show: true,
          trigger: 'item', // 数据项图形触发
          backgroundColor: '#fff' // 提示框浮层的背景颜色。
        },
        visualMap: { // 视觉映射组件
          show: false,
          top: 'center',
          left: 'left',
          min: 10,
          max: 500000,
          text: ['High', 'Low'],
          realtime: false, // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          }
        },
        series: [
          {
            name: '',
            map: 'china',
            type: 'effectScatter', // series图表类型
            coordinateSystem: 'geo', // series坐标系类型
            symbolSize: function(val) { // 设置散点大小
              return val[2]
            },
            effectType: 'ripple',
            rippleEffect: {
              color: 'green',
              brushType: 'stroke'
            },
            tooltip: { // 这里设置提示框
              show: true,
              trigger: 'item', // 数据项图形触发
              backgroundColor: '#fff', // 提示框浮层的背景颜色。
              formatter: '{b}'
            },
            data: data
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.ik-chart-card {
  width: 100%;
  height: 100%;
  position: relative;
  ::v-deep .el-card__header {
    padding: 10px;
    position: absolute;
    width: 100%;
    .clearfix {
      height: 20px;
      line-height: 20px;
    }
  }
  ::v-deep .el-card__body {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: calc(100% - 41px) !important;
    padding: 0px;
    padding-left: 5px;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>
